@theme-color: #ff5a1e; //主题色
@theme-font-color: #2974F0; //主题字体颜色
@theme-bg-color: #508CEE; //主题背景色
.calendar {
  background: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 99999999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.calender-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
}

.date-bar {
  background-color: #eee;
  color: #535353;
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      line-height: 2.5rem;
      &:first-child,
      &:last-child {
        color: @theme-font-color;
      }
    }
  }
}

.calendar-con-box {
  position: fixed;
  top: 2.424rem;
  left: 0;
  width: 100%;
  height: (100vh - 3.03rem);
  .scrollCalendar {
    height: 100%;
  }
}

.calendar-content {
  padding-bottom: 3.788rem;
  .month-title {
    text-align: center;
    line-height: 3.03rem;
    background-color: #f5f5f5;
    color: #666;
  }
  .month-data-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0.758rem 0;
    .a-day {
      padding: .758rem .303rem;
      position: relative;
      width: 100/7vw;
      text-align: center; // line-height: 3.788rem;
      border-radius: .379rem;
      display: flex;
      flex-direction: column;
      line-height: 1.3;
      color: #313131;
      p {
        font-size: .985rem;
      }
      span {
        color: @theme-color;
        min-height: .909rem;
        font-size: .758rem;
      }
      b {
        font-weight: normal;
        font-size: .606rem;
        color: #999;
        &.minimum {
          color: @theme-color;
        }
      }
      &.on {
        background-color: @theme-bg-color;
        color: #fff;
        span {
          color: #E3EBFC;
        }
        b {
          color: #fff;
        }
      }
      &.gray {
        color: #999;
        span{
          color: coral;
        }
        b {
          color: #ddd;
        }
      }
    }
  }
}